<template>
  <div>
    <Card>
      <div class="p-relative">
        <div @click="refresh" class="p-absolute refresh-btn">
          <Icon size='24' type="md-refresh" />
        </div>
        <div class="flex-box search-area">
          <div class="flex-item">
            <Input v-model="searchObj.keywords" placeholder="订单号、用户名、手机号" style="width:250px" />
          </div>

          <div class="flex-item">
            <DatePicker @on-change="changeCreateTime" type="daterange" placeholder="请选择购买时间" style="width: 180px">
            </DatePicker>
          </div>
          <div class="flex-item search-btn" @click="search">
            <Button type="warning">搜索</Button>
          </div>
          <div class="flex-item search-btn" @click="reset">
            <Button>重置</Button>
          </div>
          <div class="flex-item search-btn" @click="exportExcel">
            <Button type="warning">导出</Button>
          </div>

        </div>
      </div>
      <Table :columns="tableOption" :data="data.list" border :no-data-text="loadingText ? loadingText : '暂无数据'" border
        ref="tables" editable search-place="top">

        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-box flex-center flex-margin">
            <Button type='warning' @click="detail(row, index)" size='small'>查看</Button>

          </div>
        </template>
      </Table>
      <Page class="foot-page" :current='page.current' :total="page.total" :page-size="page.pageSize" show-total
        show-elevator @on-change="changepage"></Page>

    </Card>

    <!-- 查看弹窗 -->
    <!-- @on-ok="ok" @on-cancel="cancel" -->
    <Modal v-model="detailModal" title="订单详情" width='60%'>
      <div class="detail-table">
        <div class="base-info">
          <Row class='row-main-title font16 table-head-bg padding10'>
            <Col span="24">基本信息</Col>
          </Row>

          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">订单号：</span>{{formItem.detail.order_no}}</Col>
            <Col span="8"><span class="font-gray">交易流水号：</span>{{formItem.detail.callback_trade_no}}</Col>
            <Col span="8"><span class="font-gray">订单状态：</span><label style="color: #ff6600;">已充值</label></Col>

          </Row>

          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">姓名：</span>{{formItem.detail.username}}</Col>
            <Col span="8"><span class="font-gray">电话：</span>{{formItem.detail.mobile}}</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">运动卡名称：</span>{{formItem.detail.card_name}}</Col>
            <!-- <Col span="8"><span class="font-gray">运动卡面额：</span>￥{{formItem.detail.price}}元</Col> -->
            <Col span="8"><span class="font-gray">赠送金额：</span>￥{{formItem.detail.give_amount}}元</Col>

          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">支付金额：</span>￥{{formItem.detail.amount}}元</Col>
            <Col span="8"><span class="font-gray">支付方式：</span>微信</Col>
            <Col span="8"><span class="font-gray">购买时间：</span>{{formItem.detail.create_time}}</Col>

          </Row>

        </div>

      </div>
      <div slot="footer">
        <Button @click='detailModal=false'>关闭</Button>

      </div>
    </Modal>
  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import {
    mapState
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'
  import {
    formatDate
  } from '@/config/publicTool.js' // 日期转换,//调用的时候formatDate(),不需要this
  // 接口
  import {
    getList,
    getDetail,
    exportData,

  } from '@/api/order-group/card-order'
  import {
    tableOption
  } from '../../../data/order-group/card-order'
  import Tables from '_c/tables'
  import {
    getTableData
  } from '@/api/data'

  export default {
    name: 'tables_page',
    components: {
      Tables
    },
    created() {
      let _this = this
      this.$nextTick(function() {
        _this.role_detail = permission(this.roles, 'order/cardDetail') // 查看权限
        _this.role_export = permission(this.roles, 'order/exportCardData') // 查看权限
      })
      this.getList()
    },
    watch: {

    },
    mounted() {

    },
    computed: {
      ...mapState({
        roles: state => state.user.roles
      }),


    },
    data() {
      return {
        role_detail: false,
        role_export: false,
        // 查询参数
        searchObj: {
          create_time: [],

          order_estate: '',
          keywords: '',

        },
        rowId: '',
        tableOption: tableOption,
        data: {
          list: [],
          detail_list: {},

        },
        formItem: {
          detail: [],

        },

        loadingText: '',
        tableData: [],

        // 分页

        page: {
          pageSize: 10,
          current: 1,
          total: 0
        },
        detailModal: false, // 查看弹窗

        // 权限
        role_view: false,
        role_agree: false
      }
    },
    methods: {
      // 列表数据
      getList() {
        let _this = this

        let params = {
          page: this.page.current,
          keywords: _this.searchObj.keywords,
          create_time: _this.searchObj.create_time,
        }

        getList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list = result.list
            _this.page.total = result.total
            _this.page.pageSize = result.size
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },

      changepage(e) {
        this.page.current = e
        this.getList()
      },
      // 查看
      detail(row) {
        if (!this.role_detail) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.rowId = row.id
        this.detailModal = true
        this.view(row.id)
      },
      view(id) {
        let _this = this
        let params = {
          id: id
        }
        getDetail(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.formItem.detail = result.detail

          } else {
            let config = {
              content: res.data.message,
              background: true
            }
            _this.$Message.error(config)
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },

      // 刷新
      refresh() {
        this.searchObj = {
          create_time: [],
          pay_time: [],
          pay_type: '',
          order_estate: '',
          keywords: ''
        } // 清空搜索框
        this.getList()
      },
      // 重置
      reset() {
        this.searchObj = {
          create_time: [],
          pay_time: [],
          pay_type: '',
          order_estate: '',
          keywords: ''
        } // 清空搜索框
        this.getList()
      },
      // 查询
      search() {
        this.getList()
      },
      handleReset(name) {
        this.$refs[name].resetFields()
      },

      changPayType(e) {
        this.searchObj.pay_type = e
      },

      changEstate(e) {
        this.searchObj.order_estate = e
      },
      changeCreateTime(e) { 
        this.searchObj.create_time = e

      },
      exportExcel() {
        let _this = this
        if (!this.role_export) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        let create_time = this.searchObj.create_time[0] ? (formatDate(this.searchObj.create_time[0], 3) + ' - ' +
          formatDate(this.searchObj.create_time[1], 3)) : ''
        let obj = {
          page: this.page.current,
          keywords: _this.searchObj.keywords,
          create_time: _this.searchObj.create_time,
        }

        exportData(obj).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data.url

            window.location.href = result
          } else {
            // axios响应拦截
          }
        }).catch(function(error) {
          // 异常
          // console.log(error)
        })
      },


    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
